import styled, { ThemeProvider } from "styled-components";
// Define our button
import React, { useCallback, useState } from "react";
// 声明一个非样式组件
class A extends React.Component {
  render() {
    return <div className={`adc ${this.props.className}`} >
        {this.props.children}
    </div>;
  }
}
//   在样式组件的模板字符串中使用${}获取这个非样式组件的类名选择器
// 这里使用了${}传入了一个非样式组件，什么都没得到，就跟没写选择器是一个效果

const B = styled.div`
  ${A} {
    background-color: red;
  }
`;
const A1 = styled(A)``;
const B1 = styled.div`
  ${A1} {
    background-color: green;
  }
`;
const B2 = () => (
  <B1>
    <A1>11111</A1>
  </B1>
);

export default B2;
// 当你遇到不能直接通过${非样式组件}选中某个组件的时候，你又需要选中这个组件，就可以尝试使用styled(非样式组件)的到一个对应的样式组件，再使用这个样式组件，选择器中使用${样式组件}就可以选中这个组件，就能修改这个组件的样式了